<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>isotope排序</title>
        <style>
        * { box-sizing: border-box; }

        body {
          font-family: sans-serif;
        }

        /* ---- button ---- */

        .button {
          display: inline-block;
          padding: 0.5em 1.0em;
          margin-bottom: 10px;
          background: #EEE;
          border: none;
          border-radius: 7px;
          background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
          color: #222;
          font-family: sans-serif;
          font-size: 16px;
          cursor: pointer;
        }

        .button:hover {
          background-color: #8CF;
          color: #222;
        }

        .button:active,
        .button.is-checked {
          background-color: #28F;
        }

        .button.is-checked {
          color: white;
        }

        .button:active {
          box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
        }

        /* ---- button-group ---- */

        .button-group:after {
          content: '';
          display: block;
          clear: both;
        }

        .button-group .button {
          float: left;
          border-radius: 0;
          margin-left: 0;
          margin-right: 1px;
        }

        .button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
        .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

        /* ---- grid ---- */

        .grid {
          border: 1px solid #333;
          max-width: 720px;
        }

        /* clear fix */
        .grid:after {
          content: '';
          display: block;
          clear: both;
        }

        /* ---- .element-item ---- */

        .item {
          float: left;
          width: 100px;
          height: 100px;
          margin: 5px;
          padding: 10px;
          background: #888;
        }

        .item .number {
          font-size: 50px;
          text-align: center;
          margin: 0;
        }

        .item[data-color="red"] { background: red; }
        .item[data-color="blue"] { background: blue; }
        .item[data-color="yellow"] { background: yellow; }
        </style>
    </head>
    <body>
        <h1>Isotope - multiple sortBy</h1>

        <div class="button-group sort-by-button-group">
          <button class="button is-checked" data-sort-value="color,number" />color, number</button>
          <button class="button" data-sort-value="number,color" />number, color</button>
        </div>

        <div class="grid">
          <div class="item" data-color="yellow">
            <p class="number">3</p>
          </div>
          <div class="item" data-color="blue">
            <p class="number">2</p>
          </div>
          <div class="item" data-color="blue">
            <p class="number">1</p>
          </div>
          <div class="item" data-color="yellow">
            <p class="number">1</p>
          </div>
          <div class="item" data-color="yellow">
            <p class="number">2</p>
          </div>
          <div class="item" data-color="blue">
            <p class="number">3</p>
          </div>
          <div class="item" data-color="yellow">
            <p class="number">2</p>
          </div>
          <div class="item" data-color="red">
            <p class="number">2</p>
          </div>
          <div class="item" data-color="red">
            <p class="number">3</p>
          </div>
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/isotope.pkgd.min.js"></script>
        <script>
        // init Isotope
        var $grid = $('.grid').isotope({
          itemSelector: '.item',
          layoutMode: 'fitRows',
          getSortData: {
            color: '[data-color]',
            number: '.number parseInt'
          },
          sortAscending: {
            color: true,
            number: false
          },
          // sort by color then number
          sortBy: [ 'color', 'number' ]
        });
        // $grid.isotope({
        //   sortAscending: {
        //     name: true,
        //     weight: false,
        //     category: true,
        //     number: false
        //   }
        // });
        // bind sort button click
        $('.sort-by-button-group').on( 'click', 'button', function() {
          var sortValue = $(this).attr('data-sort-value');
          // make an array of values
          sortValue = sortValue.split(',');
          $grid.isotope({ sortBy: sortValue });
        });

        // change is-checked class on buttons
        $('.button-group').each( function( i, buttonGroup ) {
          var $buttonGroup = $( buttonGroup );
          $buttonGroup.on( 'click', 'button', function() {
            $buttonGroup.find('.is-checked').removeClass('is-checked');
            $( this ).addClass('is-checked');
          });
        });
        // sort highest number first
        // $grid.isotope({
        //   sortBy: 'number',
        //   sortAscending: false
        // });
        // 在子元素数据变化之后更新排序
        // $grid.isotope('updateSortData').isotope();
        </script>
    </body>
</html>